<template>
  <view class="content">
    <view v-if="hasLogin" class="hello">
      <view>
        <uni-card :is-full="true" :is-shadow="true">
          <view class="user-info">
            <image class="logo-img" :src="userInfo.avatar != ''?userInfo.avatar : avatarUrl"></image>
            <text class="uer-name">{{ userName }}</text>
          </view>
          <view class="asset-info">
            <view class="asset-detail time-info" style="margin-top: 10rpx">
              学习总时长：{{ cumulativeLearnedTimeStr }}</view
            >
            <view class="asset-detail time-info">
              娱乐总时长：{{ cumulativePlayedTimeStr }}</view
            >
            <view class="asset-detail" style="margin-top: 20rpx">
              <uni-icons type="smallcircle" size="16" color="#65c294" />
              <view class="score-info"
                >玉币：{{ userInfo.recognizedPoints }}/{{
                  userInfo.hisRecognizedPoints
                }}</view
              >
            </view>
            <view class="asset-detail">
              <uni-icons type="smallcircle" size="16" color="#7bbfea" />
              <view class="score-info"
                >玻璃币：{{ userInfo.privatePoints }}/{{
                  userInfo.hisPrivatePoints
                }}</view
              >
            </view>
          </view>
        </uni-card>
        <view class="chart-view">
          <text class="chart-title">{{ userInfo.staticTitle }}</text>
          <echarts :option="myChartOption" class="chart"/>
        </view>
        
        <view class="card-container">
            <view class="card-bt lf" @click="guideToPointRegist(1)">
                <uni-icons type="plus" size="16" color="4BAC68" style="margin-right:5px"/>
                <text>学完啦</text>
            </view>
            <view class="card-bt rt" @click="guideToPointRegist(2)">
                <uni-icons type="heart" size="16" color="4493B3" style="margin-right:5px"/>
                <text>玩完啦</text>
            </view>
            <view class="card-bt bottom" @click="guideToPointRegist(3)">
                <uni-icons type="eye" size="16" color="786DB6" style="margin-right:5px"/>
                <text>盯完啦</text>
            </view>
        </view>
      </view>
    </view>
    <view v-if="!hasLogin" class="hello">
      <view class="title"> 您好 请先登录。 </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { univerifyLogin } from '@/common/univerify.js'
import { apiGetUserInfoAndWeekStatic } from '@/api/userInfo.js'
import { checkToken } from '@/common/utils.js'
import echarts from '@/components/echarts/echarts.vue';

export default {
  components:{echarts},
  data() {
    return {
        avatarUrl: '../../static/img/logo.png',
        userInfo: {
            recognizedPoints:0,
            hisRecognizedPoints:0,
            privatePoints:0,
            hisPrivatePoints:0
        },
        cumulativeLearnedTimeStr: '0m',
        cumulativePlayedTimeStr: '0m',
        myChartOption:this.getEchartsOption(),
        chartStyle: { display:'none'}
    }
  },
  computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
  onLoad(option) {
    // 如果是其他页面更新信息后，根据参数直接刷新即可
    if(option.refresh === 'true'){
        apiGetUserInfoAndWeekStatic().then(res=>{
            uni.setStorageSync('userInfo',res)
            uni.setStorageSync('username',res.userName)
            this.userInfo = res
            this.login(this.userInfo.userName)
            this.cumulativeLearnedTimeStr = this.getTimeStr(this.userInfo.cumulativeLearnedTime)
            this.cumulativePlayedTimeStr = this.getTimeStr(this.userInfo.cumulativePlayedTime)
            this.setOption(this.userInfo.addRegistStatic,this.userInfo.useRegistStatic)
        }).catch(()=>uni.navigateTo({url: '../login/login'}))
    }else{
        const uniIdToken = uni.getStorageSync('uni_id_token')
        if(uniIdToken){
            const that = this
            checkToken().then(()=>{
                that.userInfo = uni.getStorageSync('userInfo')
                that.cumulativeLearnedTimeStr = that.getTimeStr(that.userInfo.cumulativeLearnedTime)
                that.cumulativePlayedTimeStr = that.getTimeStr(that.userInfo.cumulativePlayedTime)
                that.login(uni.getStorageSync('username'))
                if(that.myChart !== {}){
                    that.setOption(that.userInfo.addRegistStatic,that.userInfo.useRegistStatic)
                }
            }).catch(error =>{
                uni.showModal({
                    content: error,
                    success: () => {
                        if (that.forcedLogin) {
                            uni.reLaunch({url: '../login/login'})
                        } else {
                            uni.navigateTo({url: '../login/login'})
                        }
                    }
                })
            })
        }else{
            this.guideToLogin()
        }
    }
  },
  mounted(){
    this.setOption(this.userInfo.addRegistStatic,this.userInfo.useRegistStatic)
  },
  methods: {
    ...mapMutations(['login']),
    setOption(addStaticLst,useStaticLst){
        this.myChartOption = 
            this.getEchartsOption(addStaticLst,useStaticLst)
    },
    getEchartsOption(addStaticLst,useStaticLst){
        return {
        legend: { show: true, bottom: 10 },
        tooltip: {},
        xAxis: {
            data: ["一","二","三","四","五","六","日"]
        },
        yAxis: {
          name: '时长(m)'
        },
        series: [{
            name: '学习',
            type: 'bar',
            data: addStaticLst,
            color: ['#91ca8c']
        },{
            name: '娱乐',
            type: 'bar',
            data: useStaticLst,
            color: ['#ffce7b']
        }
        ]
    }
    },
    getTimeStr(times) {
      if(times>60){
        return parseInt(times / 60) + 'h' + (times % 60) + 'm'
      }else{
        return times + 'm'
      }
    },
    guideToPointRegist(registType) {
      let url = '../pointRegist/pointRegist'
      switch(registType){
        case 1:
          url+='?addFlag=true&addType=private'
          break;
        case 2:
          url+=`?addFlag=flase&recognizedPoints=${this.userInfo.recognizedPoints}&privatePoints=${this.userInfo.privatePoints}`
          break;
        case 3:
          url+='?addFlag=true&addType=supervise'
          break;
      }
      uni.navigateTo({url: url})
    },
    guideToLogin() {
      uni.showModal({
        title: '未登录',
        content: '您未登录，需要登录后才能继续',
        /**
         * 如果需要强制登录，不显示取消按钮
         */
        showCancel: !this.forcedLogin,
        success: res => {
          if (res.confirm) {
            univerifyLogin().catch(err => {
              if (err === false) return
              /**
               * 如果需要强制登录，使用reLaunch方式
               */
              if (this.forcedLogin) {
                uni.reLaunch({
                  url: '../login/login'
                })
              } else {
                uni.navigateTo({
                  url: '../login/login'
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style>
/* @font-face {
  font-family: zkhy;
  src: url('../../static/zkhy.ttf');
} */

.uni-card--full {
  border-radius: 16rpx;
  box-shadow: 0px 3px 5px #ccc;
}

.hello {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.user-info {
  width: 40%;
  display: block;
  float: left;
  text-align: center;
}

.logo-img {
  border: 1px solid #a1a9ad;
  width: 180rpx;
  height: 180rpx;
  border-radius: 150rpx;
}

.uer-name {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 40rpx;
}

.asset-info {
  width: 60%;
  display: inline;
  float: left;
}

.asset-detail {
  padding: 4rpx 16rpx;
}

.time-info {
  font-family: zkhy;
  font-weight: bold;
  font-size: 28rpx;
}

.score-info {
  display: inline-block;
  font-family: zkhy;
  font-size: 26rpx;
}

.card-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.card-bt {
    width: 29.3%;
    height: 80rpx;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-bt.lf {
  background-color: rgb(220, 245, 227);
  box-shadow: 1px 1px 4px rgb(75, 172, 104);
  color: rgb(75, 172, 104);
}

.card-bt.rt {
  background-color: rgb(215, 241, 252);
  box-shadow: 1px 1px 4px rgb(68, 147, 179);
  color: rgb(68, 147, 179);
}

.card-bt.bottom {
  background-color: rgb(234, 230, 253);
  box-shadow: 1px 1px 4px rgb(120, 109, 182);
  color: rgb(120, 109, 182);
}

.title {
  color: #8f8f94;
  margin-top: 25px;
}

.ul {
  font-size: 15px;
  color: #8f8f94;
  margin-top: 25px;
}

.ul > view {
  line-height: 25px;
}

.chart-view{
    width: 100%;
    height: 280px;
    margin-top: 15px;
    position: relative;
}

.chart-title{
  width: 100%;
  position: absolute;
  top: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #5d6c6b;
  z-index: 1;
}

.chart{
  width: 100%;
  height: 100%;
}
</style>
